<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/vue.js"></script>
</head>
<body>

    <!-- 
    v-model是什么？
      一、官方文档：
        v-model的本质是语法糖，它负责监听用户的输入事件来更新数据，并对一些极端场景进行特殊处理。
      二、什么是语法糖？
        语法糖，简单来说就是『便捷写法』。
        在大部分情况下，以下两种写法是等价的
           <el-input v-model="foo" />
           <el-input :value="foo" @input="foo = $event" />
      三、v-model不仅仅是语法糖，它还有副作用
          副作用就是：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。
      四、v-model的双向数据绑定原理：
          目前的几大主流MVC(VM)框架都实现了单向数据绑定。简而言之，vue中的v-model无非就是在单向数据绑定的基础上给对应表单元素（input、select等）添加了(input、change)事件，来动态修改model和view，从而达到双向数据绑定的效果。
         1) 原生input元素的类型是text/textarea，那么是使用它的value属性和input事件来实现双向数据绑定。
         2) 原生input元素的类型是radio/checkbox，那么是使用它的checked属性和change事件来实现双向数据绑定。3) 原生select元素，是使用它的value属性和change事件来实现双向数据绑定
     -->

     <!-- 
        例如：响应式数据中没有定义 user.tel 属性，但是 template 里却用 v-model 绑定了 user.tel，猜一猜当你输入时会发生什么？
        揭晓答案： user 上会新增 tel 属性，并且 tel 这个属性还是响应式的。
        这就是副作用带来的效果。
      -->
    <div id="app">
        输入手机号：<input v-model="user.tel"></input> {{user.tel}}
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app', // 找到DOM节点
        data:{ // vue的初始化数据
            user: {
              name: '张三'
            }
        }
    })
   
</script>
</html>